<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      margin: auto;
    }

    .box {
      width: 400px;
      margin: auto;
    }

    .btn1,
    .btn2,
    .btn3 {
      line-height: 48px;
      width: 200px;
      margin: 4px 0;
      color: #333;
      border-radius: 24px;
      border: none;
      background: rgba(194, 102, 255, 0.267);
    }
  </style>
</head>

<body>
  <div class="contianer">
    <div class="box"><button id="btn1" class="btn1">读题打断</button></div>
    <div class="box"><button id="btn2" class="btn2">思考打断</button></div>
    <div class="box"><button id="btn3" class="btn3">其他</button></div>
  </div>
</body>
<script>
  // 截流
  function throttleAsync(fnName) {
    let flag = true;
    console.log(fnName + '创建=====' + flag);
    return async (function_) => {
      console.log(fnName + '执行=====', flag);
      if (flag) {
        flag = false;
        try {
          await function_();
        } finally {
          flag = true;
          console.log(fnName + '完成=====', flag);
        }
      }
    };
  }

  const thr1 = throttleAsync('读题打断');
  const thr2 = throttleAsync('思考打断');
  // const thr3 = throttleAsync('其他');

  const btn1 = document.getElementById('btn1');
  const btn2 = document.getElementById('btn2');
  const btn3 = document.getElementById('btn3');
  let timer1;
  const prom1 = () => new Promise((resolve, reject) => {
    timer1 = setTimeout(() => {
      resolve();
    }, 5000)
  })

  let timer2;
  const prom2 = () => new Promise((resolve, reject) => {
    clearTimeout(timer1)
    timer2 = setTimeout(() => {
      resolve()
    }, 3_000)
  })

  const prom3 = async () => {
    await prom1()
    console.log(1111)
  }


  // 执行读题干
  await promise1()
  btn1.addEventListener('click', async () => {
    await thr1(prom3);
  })
  btn2.addEventListener('click', async () => {
    await thr2(prom2);
  })




</script>

</html>